<!-- 商品卡片 -->
<template>
  <div class="goodscard">
    <div class="good_item">
      <el-card class="good_card"
               shadow="hover"
               v-for="item in arr.slice(0,6)"
               :key="item">
        <el-image class="good_img"
                  :src="item.goodsImgurl"
                  :fit="fit" />
        <span class="good_tit">{{ item.goodsName }}</span>
        <div style="width:100%;float: left;padding: 5px;">
          <span class="good_pri">¥{{ item.goodsPrice }} </span>
          <span class="good_sale">775人付款</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Goodscard',
  data() {
    return {
      arr: [
        {
          name: '桂圆红枣茶',
          price: '35',
          url: require('../assets/goods/CHALI/guiyuanhongzhaocha_white.jpg'),
        },
        {
          name: '红豆薏米茶',
          price: '35',
          url: require('../assets/goods/CHALI/hongdouyimicha_white.jpg'),
        },
        {
          name: '蜜桃乌龙茶',
          price: '35',
          url: require('../assets/goods/CHALI/mitaowulong_white.jpg'),
        },
        {
          name: '雪梨白茶',
          price: '35',
          url: require('../assets/goods/CHALI/xuelibaicha_white.jpg'),
        },
      ],
    }
  },
  created() {
    var _this = this
    // 获取所有商品
    this.$http.get('/getAllGoods').then((success) => {
      console.log(success.data)
      _this.arr = success.data
    })
  },
}
</script>

<style>
.good_item {
  overflow: hidden;
  width: 100%;
  border-radius: 16px;
  background-color: #f5e9e9;
}
.good_card {
  width: 40%;
  margin: 4% 4% 5% 5%;
  float: left;
  border-radius: 14px;
  background-color: white;
}
.good_img {
  width: 100%;
  height: 100%;
}
.good_tit {
  font-weight: 600;
}
.good_pri {
  font-weight: 600;
  font-size: 24px;
  color: #ff5608;
  padding-right: 4%;
}
.good_sale {
  font-size: 12px;
  color: #636060;
}
</style>